<template>
  <div class="app-container">
    <!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <div>
          <el-form>
            <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>
            <el-select clearable placeholder="状态" v-model="QueryData.status" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
              <el-option
                v-for="itemquery in optionsquery"
                :key="itemquery.label"
                :label="itemquery.label"
                :value="itemquery.value">
              </el-option>
            </el-select>
            <el-input v-model="QueryData.correlationRateb" placeholder="到"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.correlationRatea" placeholder="占用率从" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.billNum" placeholder="发票编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.contractNum" placeholder="合同编号" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
            <el-input v-model="QueryData.buyUnit" placeholder="采购单位" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
          </el-form>
        </div>
      </div>
    </div>
    <!--    表格组件-->
    <el-table
      ref="Table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <!-- 展开折叠部分 -->
      <el-table-column type="expand" width="1" style="display: none;border-right: 0px solid #ebeef5">
        <template slot-scope="scope">
          <el-table :data="list[scope.$index].costVoList" style="width: 100%" max-height="250">
          <el-table-column label="采购合同编号" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.contractNum}}
            </template>
          </el-table-column>
          <el-table-column label="供应商" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.buyUnit}}
            </template>
          </el-table-column>
          <el-table-column label="发票编号" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.billNum}}
            </template>
          </el-table-column>
          <el-table-column label="开票日期" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.billDate }}
            </template>
          </el-table-column>
          <el-table-column label="发票类型" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.billType }}
            </template>
          </el-table-column>
          <el-table-column label="发票金额" width="170" align="center">
            <template slot-scope="scopeBill">
              {{ scopeBill.row.billAccount }}
            </template>
          </el-table-column>
          <el-table-column label="品名" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.typeName}}
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsName}}
            </template>
          </el-table-column>
          <el-table-column label="型号" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.modle}}
            </template>
          </el-table-column>
          <el-table-column label="单价" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsUnitPrice}}
            </template>
          </el-table-column>
          <el-table-column label="关联数量" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsAccount}}
            </template>
          </el-table-column>
          <el-table-column label="操作者" width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.createAdminTrueName}}
            </template>
          </el-table-column>
          <el-table-column label="操作日期" width="160">
            <template slot-scope="scopeBill">
              {{scopeBill.row.createDate}}
            </template>
          </el-table-column>
        </el-table>
        </template>
      </el-table-column>

      <el-table-column label="采购单位" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.buyUnit }}
        </template>
      </el-table-column>
      <el-table-column label="销售合同编号" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractNum }}
        </template>
      </el-table-column>
      <el-table-column label="销售合同日期" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractDate }}
        </template>
      </el-table-column>
      <el-table-column label="销售合同金额" width="240" align="center">
        <template slot-scope="scope">
          {{ scope.row.contractAmount }}
        </template>
      </el-table-column>
      <el-table-column label="关联率" width="120" align="center">
        <template slot-scope="scope">
          {{ scope.row.correlationRate }}
        </template>
      </el-table-column>
      <el-table-column label="关联状态" width="140" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0"> 待完成</span>
          <span v-if="scope.row.status == 1"> 已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="发票状态" width="140" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.billStatus == 0"> 未开票</span>
          <span v-if="scope.row.billStatus == 1"> 部分开票</span>
          <span v-if="scope.row.billStatus == 2"> 已开票</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="200">
        <template slot-scope="scope">
          <el-button size="small" plain @click="toogleExpand(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>

  </div>
</template>

<script>
import api from '@/api/check'

export default {
  data() {
    return {
      QueryData:{ },
      list: [],
      listLoading: true,
      //下拉选项
      optionsquery: [{
        value: '0',
        label: '待完成'
      }, {
        value: '1',
        label: '已完成'
      }],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //关联发票查询
    handleQuery() {
      let Querydata1 = new FormData()
      Querydata1.append("currentPage", this.pagination.currentPage)
      Querydata1.append("pageSize", this.pagination.pageSize)
      if (this.QueryData.status != null && this.QueryData.status != "")
        Querydata1.append("status", this.QueryData.status)
      if (this.QueryData.correlationRatea != null && this.QueryData.correlationRatea != "" && this.QueryData.correlationRateb != null && this.QueryData.correlationRateb != "") {
        Querydata1.append("correlationRatea", this.QueryData.correlationRatea)
        Querydata1.append("correlationRateb", this.QueryData.correlationRateb)
      }
      if (this.QueryData.billNum != null && this.QueryData.billNum != "")
        Querydata1.append("billNum", this.QueryData.billNum)
      if (this.QueryData.contractNum != null && this.QueryData.contractNum != "")
        Querydata1.append("contractNum", this.QueryData.contractNum)
      if (this.QueryData.buyUnit != null && this.QueryData.buyUnit != "")
        Querydata1.append("buyUnit", this.QueryData.buyUnit)
      api.Query(Querydata1).then(resp => {
          this.list = resp.data.page.content
          this.pagination.currentPage = resp.data.page.number + 1
          this.pagination.pageSize = resp.data.page.size
          this.pagination.total = resp.data.page.totalElements
          this.listLoading = false
        }
      )

    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      api.getList(this.pagination).then(response => {
          this.list = response.data.page.content
          this.pagination.currentPage = response.data.page.number + 1
          this.pagination.pageSize = response.data.page.size
          this.pagination.total = response.data.page.totalElements
          this.listLoading = false
        }
      )
    },
    //弹出折叠面板
    toogleExpand(row) {
      const Table = this.$refs.Table
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          Table.toggleRowExpansion(item, false)
        }
      })
      Table.toggleRowExpansion(row)
    },
    fetchData() {
      this.listLoading = true

      this.getAll()
    },
  },
  computed: {

  }
}
</script>
